* {
  margin: 0;
  padding: 0;
}

@total-width: 750;
.w {
  width: (693/40rem);
  margin: 0 auto;
}

//设置根元素
html {
  //设置rem的比值
  font-size: (100vw/@total-width) * 40;
  background-color: #eff0f4;
}
a{
  text-decoration: none;
}
.top-wrapper:extend(.w) {
  display: flex;
  height: (175/40rem);
  line-height: (175/40rem);
  justify-content: space-between;
  align-items: center;

  a{
    color: #24253d;
    font-size: (50/40rem);
    i{
      color: #999;
      font-size: (33/40rem);
    }
  }
}

.banner:extend(.w) {
  img{
    width: 100%;
  }
}
//设置中间菜单
.menu:extend(.w) {
  height: (330/40rem);
  display: flex;
  justify-content: space-between;
  align-content: space-evenly;
  flex-flow: row wrap;
  a{
    width: (330/40rem);
    height: (104/40rem);
    line-height: (104/40rem);
    font-size: (30/40rem);
    color: #fff;
    border-radius: (10/40rem);
    i{
      margin: 0 (20/40rem) 0 (38/40rem);
    }
  }
  .course{
    background-color: #f97053;

  }
  .star{
    background-color: #f4a04c;
  }
  .sub{
    background-color: dodgerblue;
  }
  .download{
    background-color: orchid;
  }
}

.course-list:extend(.w) {
  height: (394/40rem);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-top: (20/40rem);
  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2{
      font-size: (33/40rem);
      color: #24253d;
      border-left: 2px solid #3a84ff;
      padding-left: (10/40rem);
    }
    a{
      font-size: (28/40rem);
    }
  }
  .item-list{
    width: (720/40rem);
    display: flex;
    height: (335/40rem);
    overflow: scroll;
    &::-webkit-scrollbar{
      display: none;
    }
    .item{
      flex: none;
      border-radius: (10/40rem);
      box-shadow: 0 0 10px rgba(0,0,0,.3);
      box-sizing: border-box;
      padding: 0 (26/40rem);
      width: (320/40rem);
      height: (324/40rem);
      background-color: #fff;
      display: flex;
      flex-flow: column;
      justify-content: space-evenly;
      margin-right: (24/40rem);
      .course-title{
        font-size: (32/40rem);
        color: #24253d;
      }
      img{
        width: 100%;
      }
      .user-info{
        display: flex;
        align-items: center;
        .avatar{
          width: (42/40rem);
          height: (42/40rem);
        }
        .nickname{
          margin-left: (13/40rem);
          color: #969393;
          font-size: (24/40rem);
        }
      }
    }
  }
}

